@tailwind base;
@tailwind components;
@tailwind utilities;

*::-webkit-scrollbar {
  width: .5rem;
  @apply bg-gray-200 dark:bg-gray-900;
}
 
*::-webkit-scrollbar-track {
  /*box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);*/
}
 
*::-webkit-scrollbar-thumb {
  @apply bg-gray-300 dark:bg-gray-700;
  /*outline: 1px solid slategrey;*/
}

.h-screen-center {
	height: auto;
}

.h-screen-center-inner {
	height: auto;
}

.content-area-offset-bottom {
	height: auto;
}

@media (min-width: 640px) {
	.h-screen-center {
		height: calc(100vh - 2.25rem - 4rem - 6rem);
	}

	.h-screen-center-inner {
		height: calc(100vh - 2.25rem - 4rem - 6rem - 2px);
	}

	.content-area-offset-bottom {
		height: calc(100vh - 2.25rem - 4rem - 6rem - 12rem);
	}
}

.sidebar-active {
	@apply bg-gray-300 dark:bg-gray-800;
	@apply text-blue-600 dark:text-purple-500;
}

.sidebar-active p {
	@apply dark:text-gray-400;
}

.sidebar-active a p {
	@apply text-gray-500;
}

.sidebar-active a div {
	@apply text-gray-500;
}

.sidebar-active div {
	@apply dark:text-gray-500;
}

.content .the-content h1 {
	@apply text-4xl font-bold my-2;
}

.content .the-content h2 {
	@apply text-3xl font-bold my-2;
}

.content .the-content h3 {
	@apply text-2xl font-bold my-2;
}

.content .the-content h4 {
	@apply text-xl font-bold my-2;
}

.content .the-content h5 {
	@apply font-bold my-2;
}

.content .the-content ul {
	@apply list-disc list-inside;
}

.content .the-content ol {
	@apply list-decimal list-inside;
}

.content .the-content a {
	@apply underline text-blue-800 dark:text-yellow-600;
}

.topic-ordering-badge a {
	@apply text-gray-500 bg-gray-200 hover:text-gray-400 dark:text-gray-400 dark:bg-gray-900 dark:hover:bg-gray-700 dark:hover:text-gray-300;
}

.topic-ordering-badge a.active {
	@apply bg-gray-300 text-gray-500 dark:bg-gray-700 dark:text-gray-300 cursor-default;
}

.reaction-badge.active svg,
.reaction-badge.active span {
	@apply text-blue-500 dark:text-yellow-300 !important;
}

[x-cloak] { display: none !important; }